<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	</head>
	<body>
		<form class="layui-form layui-form-pane" action="#" method="post">
			<div class="layui-form-item">
				<label class="layui-form-label" for="userName"><i class="fa fa-user"></i></label>
				<div class="layui-input-block">
					<input id="userName" type="text" name="userName" lay-verify="username" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" for="userPwd"><i class="fa fa-lock"></i></label>
				<div class="layui-input-block">
					<input id="userPwd" type="password" lay-verify="password" name="userPwd" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男">
					<input type="radio" name="sex" value="女" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block" lay-verify="hobbies">
					<input type="checkbox" name="hobbies"  value="吃" title="吃">
					<input type="checkbox" name="hobbies"  value="喝" title="喝">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">下拉框</label>
				<div class="layui-input-block">
					<select lay-verify="className">
						<option></option>
						<option>计算机一班</option>
						<option>计算机一班</option>
						<option>计算机一班</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">文本域</label>
				<div class="layui-input-block">
					<textarea class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn"   type="reset">重置</button>
					<button class="layui-btn" lay-filter="userLogin" lay-submit>提交</button>
				</div>
			</div>
		</form>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<!-- 	<script type="text/javascript">
		layui.use(['form'], function(){
		  var form = layui.form;
		  //
		});
	</script> -->
	<script type="text/javascript">
		layui.form.verify({
			username: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value.length <= 0) {
					return '用户名不能为空';
				}
			},
			password: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value.length <= 0) {
					return '密码不能为空';
				}
			},
			className: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value.length <= 0) {
					return '班级为必选项';
				}
			}
		});
		
		/*拦截表单提交，改为异步*/
		layui.form.on('submit(userLogin)', function(data){
			//手动发起异步请求 ajax
			console.log(data.field)
			console.log(data.field.userName);
			console.log(data.field.userPwd);
			console.log(data.field.sex);
			console.log(data.field.hobbies);
			//ajax是jquery中的异步请求框架
			//layui中已经集成的有jquery框架
			//layui.$去使用
			layui.$.ajax({
			   type: "POST",
			   url: "some.php",
			   data: data.field,
			   success: function(msg){
			     alert( "Data Saved: " + msg );
			   }
			});
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	</script>
</html>
